<template>
  <view>
    <view class="reg_wrapper" v-if="showResult === false">
      <view class="tx1">账号申诉</view>
      <view class="field_cell_group">
        <view class="field_cell">
          <input
            class="reg_field"
            type="text"
            placeholder="请输入您的真实姓名"
            autocomplete="off"
            v-model="form.realname"
          />
        </view>
        <view class="field_cell">
          <input 
            class="reg_field"
            type="tel"
            placeholder="请输入手机号"
            autocomplete="off"
            v-model="form.mobile"
          />
        </view>
        <view class="field_cell">
          <input
            class="reg_field"
            type="number"
            placeholder="请输入验证码"
            autocomplete="off"
            v-model="form.code"
          />
          <u-button class="reg_get_btn" @click="sendSms" hover-class="none">
            {{ sendSmsBtnText }}
          </u-button>
        </view>
        <view class="field_cell">
          <input
            class="reg_field"
            type="text"
            placeholder="账号申诉描述"
            autocomplete="off"
            v-model="form.description"
          />
        </view>
      </view>
      <u-button type="primary" shape="circle" @click="handleSubmit">提交</u-button>
    </view>
    <view class="result_wrapper" v-if="showResult === true">
      <view class="res_ico">提交成功</view>
      <view class="res_txt">客服人员将会尽快联系您</view>
      <view class="res_txt">请保持电话畅通！</view>
    </view>
    <view class="bottom_tip">
      <view class="tip_title">申诉提示</view>
      <view class="tip_txt">1、申诉后，我们客服人员将尽快联系您</view>
      <view class="tip_txt">
        2、申诉联系电话
        <span class="tel">{{ contact_tel }}</span>
      </view>
      <view class="tip_txt">3、申诉成功后，我们将把账号密码重置并提供给您</view>
    </view>
    <Captcha ref="captcha"></Captcha>
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import Captcha from '@/components/captcha/index'
import {mapState} from 'vuex'
export default {
  name: 'Appeal',
  components: {
    Captcha
  },
  data () {
    return {
      showResult: false,
      form: {
        realname: '',
        mobile: '',
        code: '',
        description: ''
      },
      checked: true,
      btnText: '获取验证码',
      btnDisabled: false,
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/
    }
  },
  computed:{
	...mapState({
		sendSmsBtnText:state=>state.sendSmsBtnText,
		contact_tel:state=>state.config.contact_tel
	})  
  },
  created() {
  	console.log(this.$store.state.config.contact_tel,this.contact_tel)
  },
  methods: {
    // 发送验证码
    sendSms () {
      if (this.$store.state.sendSmsBtnDisabled) {
        return false
      }
      if (!this.form.mobile) {
		this.$refs.uTips.show({
			title: '请输入手机号',
			type: 'error'
		})
        return false
      }
      if (!this.regularMobile.test(this.form.mobile)) {
		this.$refs.uTips.show({ 
			title: '手机号格式不正确',
			type: 'error'
		})
        return false
      }
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_auth_mobile_nocheck,
            mobile: this.form.mobile,
            type: 0,
            captcha: res
          })
          .then(response => {
            if (response.code === 200) {
				this.$refs.uTips.show({
					title: this.$store.state.sendSmsMessage,
					type: 'success'
				})
            } else {
			  this.$refs.uTips.show({
			  	title: this.$store.state.sendSmsMessage,
			  	type: 'error'
			  })
              return false
            }
          })
      })
    },
    handleSubmit () {
      if (!this.form.realname) {
		this.$refs.uTips.show({
			title: '请输入真实姓名',
			type: 'error'
		})
        return false
      }
      if (!this.form.mobile) {
		this.$refs.uTips.show({
			title: '请输入手机号',
			type: 'error'
		})
        return false
      }
      if (!this.regularMobile.test(this.form.mobile)) {
		this.$refs.uTips.show({
			title: '手机号格式不正确',
			type: 'error'
		})
        return false
      }
      if (!this.form.code) {
		this.$refs.uTips.show({
		  title: '请输入验证码',
		  type: 'error'
		})
        return false
      }
      if (!this.form.description) {
		this.$refs.uTips.show({
		  title: '请输入账号申诉描述',
		  type: 'error'
		})
        return false
      }
      let postData = { ...this.form }
      http
        .post(api.member_appeal, postData)
        .then(res => {
          if (parseInt(res.data.code) === 200) {
            this.$store.commit('clearCountDownFun')
            this.showResult = true
          } else {
			this.$refs.uTips.show({
			  title: res.data.message,
			  type: 'error'
			})
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.result_wrapper {
  padding-top: 230rpx;
  text-align: center;
  .res_ico {
    display: inline-block;
    font-size: 48rpx;
    padding: 16rpx 0 16rpx 100rpx;
    color: #333333;
    margin-bottom: 20rpx;
    background-image: url(./static/img/success.png);
	background-position: 0 center;
	background-repeat: no-repeat;
    background-size: 40rpx;
  }
  .res_txt {
    font-size: 30rpx;
    color: #666666;
    margin-top: 20rpx;
  }
}
.reg_wrapper {
  width: 646rpx;
  margin: 0 auto;
}
.bottom_tip {
  width: 646rpx;
  position: absolute;
  left: 50%;
  bottom: 56rpx;
  transform: translate(-50%, 0);
  font-size: 26rpx;
  .tip_title {
    color: #666666;
  }
  .tip_txt {
    color: #999999;
    margin-top: 20rpx;
  }
  .tel {
    color: #3388ff;
  }
}
.tx1 {
  padding: 110rpx 0 56rpx;
  font-size: 52rpx;
  color: #333333;
}

.field_cell {
  width: 100%;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;
  padding-top: 40rpx;
}
.field_cell_group {
  .field_cell:last-child {
    margin-bottom: 72rpx;
  }
}
.reg_field {
  border: 0;
  width: 100%;
  color: #333333;
  font-size: 30rpx;
  &::placeholder {
    color: #c9c9c9;
  }
}
.reg_get_btn {
  position: absolute;
  right: 0;
  top:50%;
  transform: translateY(-50%);
  border: none;
  height: auto;
  font-size: 30rpx;
  // background-color: #ffffff;
  z-index: 10;
}
.reg_get_btn {
	/deep/ .u-hairline-border::after{
		border: none;
	}
}
</style>
